<div class="test-application">
  <hydro-icon
    type="icon-close"
    class="icon test-application__close-icon"
    (click)="onClose()"
  ></hydro-icon>
  <p class="application-name">
    <label>Application: </label>"{{ application.name }}"
  </p>

  <div class="test-application__content" *ngIf="state$ | async;let dialogState">
    <mdl-tabs (mdl-tab-active-changed)="tabChanged($event)" mdl-ripple mdl-tab-active-index="0">
      <mdl-tab-panel mdl-tab-panel-title="web">
        <form (ngSubmit)="onSubmit()">
          <div>
            <div class="test-fields">
              <div
                class="test-fields__item __input"
                *ngIf="dialogState.input; let input"
              >
                <label>Input</label>
                <codemirror
                  #inputCodeMirror
                  name="input"
                  [ngModel]="input"
                  [config]="inputOptions"
                  (change)="onChange($event)"
                ></codemirror>
              </div>
              <div class="test-fields__item __output">
                <div class="test-fields__item-header">
                  <label>Output</label>
                  <span
                    *ngIf="dialogState.status; let status"
                    class="status"
                  >
                    status
                    <span class="status__text status__text--{{ status }}">
                      {{ status }}
                    </span>
                  </span>
                </div>
                <ng-container *ngIf="dialogState.output; let output">
                  <codemirror
                    #outputCodeMirror
                    [ngModel]="output"
                    [config]="outputOptions"
                    name="output"
                  >
                  </codemirror>
                </ng-container>

                <ng-container *ngIf="dialogState.error; let error">
                  <hs-error-message>
                    {{ error }}
                  </hs-error-message>
                </ng-container>
              </div>
            </div>
            <div
              class="error-container"
              *ngIf="!(inputValid$ | async)"
            >
              Wrong input's format. JSON validation error
            </div>
            <div class="buttons">
              <button
                hs-button
                kind="flat"
                color="primary"
                [disabled]="!(inputValid$ | async) || isPending(dialogState)"
                hsAutofocused
              >
                test app
              </button>
            </div>
          </div>
        </form>
      </mdl-tab-panel>
      <mdl-tab-panel mdl-tab-panel-title="cURL">
        <hydro-command-template
          type="curl"
          [application]="application"
          [isValidInput]="inputValid$ | async"
        >
        </hydro-command-template>
      </mdl-tab-panel>
      <mdl-tab-panel mdl-tab-panel-title="gRPC">
        <hydro-command-template
          type="grpc"
          [application]="application"
          [isValidInput]="inputValid$ | async"
        >
        </hydro-command-template>
      </mdl-tab-panel>
    </mdl-tabs>
  </div>
</div>
